<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/merchantList">商家管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>商家详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商家名称:</div>
            <div class="meizong_detail_val">{{detail.name}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">门店类型:</div>
            <div class="meizong_detail_val">{{detail.type | filtersType}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">门店手机:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.mobile}}</span>
              <a-button v-permission="permission.merchantMobile" type="primary" @click="funEditMerchantMobile" icon="edit" size="small">修改手机</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">门店类目:</div>
            <div class="meizong_detail_val">
              <a-tag color="blue" v-for="(item , index) in detail.catList" :key="index">{{item}}</a-tag>
              <a-button type="primary" @click="funEditCat" icon="edit" size="small">修改类目</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">门店标签:</div>
            <div class="meizong_detail_val">
              <a-tag color="green" v-for="(item , index) in detail.tagList" :key="index">{{item}}</a-tag>
              <a-button type="primary" @click="funEditTag" icon="edit" size="small">修改标签</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">地区:</div>
            <div class="meizong_detail_val">{{detail.provinceName}}{{detail.cityName}}{{detail.districtName}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">地址:</div>
            <div class="meizong_detail_val">{{detail.address}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商圈:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.businessAreaName}}</span>
              <a-button type="primary" @click="funEditBusinessArea" icon="edit" size="small">修改商圈</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商铺状态:</div>
            <div class="meizong_detail_val">
              <span>{{detail.status  | filtersStatus}}</span>
              <span v-show="detail.status == 4">（{{detail.rejectReason}}）</span>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商家等级:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.grade | gradeType}}</span>
              <a-button type="primary" @click="funEditGrade" icon="edit" size="small">修改等级</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">客服电话:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.userName}}</span>
              <a-button type="primary" @click="funEditService" icon="edit" size="small">修改客服</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">入驻时间:</div>
            <div class="meizong_detail_val">{{detail.createTime}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">店铺二维码:</div>
            <div class="meizong_detail_val">
              <div class="qr_code" id="qr_code" v-show="false">
                <vue-qr :bgSrc='config.logo' :logoSrc="config.logo" :text="config.value" :size="580" :dotScale="1"></vue-qr>
              </div>
              <ant-img :antImgesUl="DpQrCode" :width="200" :height="200"/>
              <!-- <ant-img :antImges="DpQrCode" :width="200" :height="200"/> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">店铺小程序码:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.MpQrCode" :width="200" :height="200"/>
              <!-- <ant-img :antImges="detail.MpQrCode" :width="200" :height="200"/> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商户进件申请状态:</div>
            <div class="meizong_detail_val">{{detail.wxApplyStatus | filtersWxApplyStatus}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">微信商户号:</div>
            <div class="meizong_detail_val">{{detail.wxMchId}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">微信商户管理员:</div>
            <div class="meizong_detail_val">{{detail.wxMchAdmin}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">营业时间类型:</div>
            <div class="meizong_detail_val">{{detail.openTimeType | filtersOpenTimeType}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">营业时间:</div>
            <div class="meizong_detail_val">{{detail.openStartTime}} -- {{detail.openEndTime}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">代办员:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.fromMobile}}</span>
              <a-button v-permission="permission.updata" v-show="detail.status == 2" type="primary" @click="funEditMobile" icon="edit" size="small">修改号码</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">关联商家的日记数量:</div>
            <div class="meizong_detail_val">{{detail.diary}}</div>
          </div>
          <!-- <div class="meizong_detail_row">
            <div class="meizong_detail_title">服务人次:</div>
            <div class="meizong_detail_val">{{detail.serviceCount}}</div>
          </div> -->
          <!-- <div class="meizong_detail_row">
            <div class="meizong_detail_title">店铺评分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.score" disabled allowHalf />
            </div>
          </div> -->
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">效果评分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.score" disabled allowHalf />
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">环境评分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.score" disabled allowHalf />
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">专业评分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.score" disabled allowHalf />
            </div>
          </div>
          <div class="meizong_detail_row" >
            <div class="meizong_detail_title">操作:</div>
            <div class="meizong_detail_val">
              <a-button type="danger" v-show="detail.status == 2" @click="handCheck()">进行审核</a-button>
              <a-button type="danger" v-show="detail.status == 6" @click="handShelf(0)">商家下架</a-button>
              <a-button type="danger" v-show="detail.status == 1" @click="handShelf(1)">商家上架</a-button>

              <a-button type="danger" v-permission="permission.waitCheck" v-show="detail.status == 3 || detail.status == 4" @click="handWaitCheck()">转待审核</a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="主体信息" force-render>
          <div class="meizong_detail_row" v-show="detail.logo">
            <div class="meizong_detail_title">商家logo:</div>
            <div class="meizong_detail_val">
              <!-- <ant-img :antImges="detail.logo" /> -->
              <ant-img :antImgesUl="detail.consumeProof" />
            </div>
          </div>
          <div class="meizong_detail_row" >
            <div class="meizong_detail_title">商家背景图:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.backImg" />
              <!-- <template v-for="(item , index) in detail.backImg">
                <ant-img :antImges="item" :key="index" />
              </template> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">营业执照:</div>
            <div class="meizong_detail_val">
              <image-upload v-show="imgEditShow" text="上传" v-model="detail.license" :isMultiple="false" ></image-upload>
              <ant-img v-show="!imgEditShow" :antImgesUl="detail.license" />
              <!-- <ant-img v-show="!imgEditShow" :antImges="detail.license" /> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">法人身份证正反面:</div>
            <div class="meizong_detail_val">
              <image-upload v-show="imgEditShow" text="上传" v-model="detail.identFront" :isMultiple="false" ></image-upload>
              <image-upload v-show="imgEditShow" text="上传" v-model="detail.identBack" :isMultiple="false" ></image-upload>
              <ant-img v-show="!imgEditShow" :antImgesUl="detail.ident" />
              <!-- <ant-img v-show="!imgEditShow" :antImgesUl="detail.identBack" /> -->
              
              <!-- <ant-img v-show="!imgEditShow" :antImges="detail.identFront" /> -->
              <!-- <ant-img v-show="!imgEditShow" :antImges="detail.identBack" /> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">店铺门头照片:</div>
            <div class="meizong_detail_val">
              <image-upload v-show="imgEditShow" text="上传" v-model="detail.img" :isMultiple="true" ></image-upload>
              <div v-show="!imgEditShow">
                <ant-img :antImgesUl="detail.img" />
                <!-- <template v-for="(item , index) in detail.img" >
                  <ant-img :antImges="item" :key="index" />
                </template> -->
              </div>
            </div>
          </div>
          <div class="meizong_detail_row" v-show="detail.medicalPermit">
            <div class="meizong_detail_title">医疗许可证:</div>
            <div class="meizong_detail_val">
              <image-upload v-show="imgEditShow" text="上传" v-model="detail.medicalPermit" :isMultiple="false" ></image-upload>
              <ant-img v-show="!imgEditShow" :antImgesUl="detail.medicalPermit" />
              <!-- <ant-img  v-show="!imgEditShow" :antImges="detail.medicalPermit" /> -->
            </div>
          </div>
          <div class="meizong_detail_row" v-if="detail.checkVideo">
            <div class="meizong_detail_title">店内环境视频:</div>
            <div class="meizong_detail_val">
              <div class='demo'>
                <VideoModal :videoUrl="detail.checkVideo"></VideoModal>
              </div>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">操作:</div>
            <div class="meizong_detail_val">
              <a-button type="primary" v-show="!imgEditShow" @click="funImgEdit()">编辑图片</a-button>
              <a-button type="primary" v-show="imgEditShow" @click="successImgEdit()">确认更改</a-button>
              <a-button type="primary" v-show="imgEditShow" @click="cancelImgEdit()">取消更改</a-button>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="3" tab="图片库">
          <ant-img :antImgesUl="detail.imgDepot" />
          <!-- <template v-for="(item , index) in detail.imgDepot">
            <ant-img :antImges="item" :key="index" />
          </template> -->
        </a-tab-pane>
        <a-tab-pane :key="4" tab="视频库">
          <template v-for="(item , index) in detail.videoDepot">
            <div class='demo' :key="index" >
              <VideoModal :videoUrl="item.url" ></VideoModal>
            </div>
          </template>
        </a-tab-pane>
        <a-tab-pane :key="5" tab="审核记录">
          <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{ x: 1300 }" :columns="columns" :dataSource="tableData" :pagination="ipagination" :loading="loading" @change="handleTableChange">
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!-- 表单区域 -->
    <examine-modal ref="modalForm" @closeModal="closeModal" @examineModal="examineModal"></examine-modal>
    <up-down-modal ref="upDownForm" @closeModal="closeModal" @upDownModal="upDownModal"></up-down-modal>
    <edit-cat-modal ref="editCatForm" @closeModal="closeModal"></edit-cat-modal>
    <edit-tag-modal ref="editTagForm" @closeModal="closeModal"></edit-tag-modal>
    <edit-mobile-modal ref="editMobileForm" @closeModal="closeModal"></edit-mobile-modal>
    <grade-modal ref="gradeForm" @closeModal="closeModal"></grade-modal>
    <service-list-modal ref="serviceForm" @closeModal="closeModal"></service-list-modal>
    <business-area-modal ref="businessAreaForm" @closeModal="closeModal"></business-area-modal>
    <wait-check-modal ref="waitCheckForm" @closeModal="closeModal"></wait-check-modal>
    <merchant-mobile-modal ref="merchantMobileForm" @closeModal="closeModal"></merchant-mobile-modal>
  </a-card>
</template>

<script>
import VueQr from 'vue-qr'
// import moment from 'moment'
import ApiTree from '@/api/merchant/merchantList';
import TagList from "@/api/common/tagList";
import { Slime, crud } from '@/mixins/slime';
import ExamineModal from '@/views/components/meizong/examineModal';
import AntImg from '@/views/components/meizong/antImg';
import UpDownModal from '@/views/merchant/modules/upDownModal';
import EditCatModal from '@/views/merchant/modules/editCatModal';
import EditTagModal from '@/views/merchant/modules/tagListModal';
import EditMobileModal from '@/views/merchant/modules/editMobileModal';
import VideoModal from '@/views/components/meizong/videoModal';
import ImageUpload from '@/components/ImageUpload'
import gradeModal from '@/views/merchant/modules/gradeModal'
import serviceListModal from '@/views/merchant/modules/serviceListModal'
import businessAreaModal from '@/views/merchant/modules/businessAreaModal'
import waitCheckModal from '@/views/merchant/modules/waitCheckModal'
import merchantMobileModal from '@/views/merchant/modules/merchantMobileModal'

export default {
  name: 'merchantDetail',
  mixins: [Slime],
  components: {
    ExamineModal,
    AntImg,
    UpDownModal,
    EditCatModal,
    EditTagModal,
    EditMobileModal,
    VideoModal,
    ImageUpload,
    gradeModal,
    serviceListModal,
    businessAreaModal,
    waitCheckModal,
    merchantMobileModal,

    VueQr,
  },
  data() {
    return {
      activeKey: 1,
      detailId: null,
      detail: {},
      //图片编辑
      imgEditShow:false,
      //table
      tableData: [],
      columns: [
        {
          title: '审批人id',
          align: 'center',
          dataIndex: 'userId',
        },
        {
          title: '审批人姓名',
          align: 'center',
          dataIndex: 'userName',
        },
        {
          title: '动作',
          align: 'center',
          dataIndex: 'action',
          customRender: function (status) {
            switch (status) {
              case 0:
                return '初始状态';
              case 1:
                return '提交审核';
              case 2:
                return '审核通过';
              case 3:
                return '审批拒绝';
              default:
                return '未知状态';
            }
          },
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime',
        },
      ],
      // 权限
      permission: {
        updata: ['admin', 'merchantList::updataFromMobile'],
        waitCheck: ['admin', 'merchantList::waitCheck'],
        merchantMobile: ['admin', 'merchantList::merchantMobile'],
      },
      //
      config: {
        value: '',//显示的值、跳转的地址
        imagePath: ''//中间logo的地址
      },
      DpQrCode:''
    };
  },
  created() {
    let id = this.$route.query.id;
    this.detailId = id;
    this.loadData(1);
    this.loadRecords();
    this.loadQrCode();
  },
  mounted() {
    this.$nextTick(()=> {
      setTimeout(()=>{
        let el = document.getElementById("qr_code").getElementsByTagName("img")[0]
        let src = el.src
        this.DpQrCode = [src]
      },50)
      // let src = document.getElementById("qr_code").getElementsByTagName("img").getAttribute("src")
      // console.log('src',src)
    })
  },
  methods: {
    // 加载表格数据
    loadData(val) {
      let that = this
      let id = this.detailId;
      ApiTree.getDetail(id).then((res) => {
        let data = res.result;
        this.detail = {
          ...data,
          logo: that.antImageArr(data.logo),
          license: that.antImageArr(data.license),
          ident: [data.identFront, data.identBack],
          // identFront: that.antImageArr(data.identFront),
          // identBack: that.antImageArr(data.identBack),
          img: that.antImageArr(data.img),
          backImg: that.antImageArr(data.backImg),
          imgDepot: that.antImageArr(data.imgDepot),
          medicalPermit: that.antImageArr(data.medicalPermit),
          score: (data.score / 100) * 5,
          rejectReason: data.rejectReason ? data.rejectReason : '未填写驳回原因'
        };
        this.activeKey = val
      });
    },
    //审核记录
    loadRecords() {
      let id = this.detailId;
      ApiTree.detailRecords(id).then((res) => {
        let data = res.result;
        this.tableData = data;
      });
    },
    //店铺二维码/店铺小程序码
    loadQrCode(){
      const that = this
      let param = {
        page: "pages/meizhong/shop/shopDetail/shopDetail",
        scene: that.detailId
      }
      ApiTree.detailMpQrCode(param).then((res) => { // 店铺小程序码
        let data = res.result;
        that.detail = {
          ...that.detail,
          MpQrCode: ['data:image/png;base64,' + data] ,
        }
      });
      //店铺二维码
      this.config.value = '{"type": "merchant", "code": ' + that.detailId + '}'
    },
    //1上架/0下架
    handShelf(val) {
      this.$refs.upDownForm.open(val, '商家', this.detail.status);
    },
    //上下架结束
    upDownModal(val) {
      const that = this;
      // let ids = []
      // ids.push(parseInt(this.detailId))
      let param = {
        id: parseInt(that.detailId),
        status: val.action == 0 ? 1 : 6, //1平台下架 6上架
      };
      ApiTree.detailUpDown(param)
        .then((res) => {
          that.$message.success('操作成功');
        })
        .finally(() => {
          that.loadData();
          that.loadRecords();
        });
    },
    //1审核通过/0不通过
    handCheck() {
      this.$refs.modalForm.open();
    },
    //审核结束
    examineModal(val) {
      const that = this;
      let param = {
        ...val,
        merchantId: this.detailId, //这里记得修改
      };
      ApiTree.detailCheck(param)
        .then((res) => {
          that.$message.success('审核成功');
        })
        .finally(() => {
          that.loadData(1);
          that.loadRecords();
          that.loadQrCode();
        });
    },
    //转待审核
    handWaitCheck(){
      let merchantId = this.detailId;
      this.$refs.waitCheckForm.open(merchantId);
    },
    //修改类目
    funEditCat() {
      let catIdList = this.detail.catIdList;
      let merchantId = this.detailId;
      this.$refs.editCatForm.open(catIdList, merchantId);
    },
    //修改标签
    funEditTag(){
      let tagList = this.detail.tagList;
      let merchantId = [parseInt(this.detailId)];
      this.$refs.editTagForm.open(tagList, merchantId);
    },
    //修改代办员手机号
    funEditMobile(){
      let merchantId = this.detailId;
      this.$refs.editMobileForm.open(merchantId);
    },
    //图片编辑
    funImgEdit(){
      this.imgEditShow = true
    },
    //确认图片编辑
    successImgEdit(){
      let detail = this.detail
      let param = {
        id: this.detailId,
        license: typeof detail.license == "string" ? detail.license : detail.license.join(','),
        identFront: detail.identFront,
        identBack: detail.identBack,
        img: typeof detail.img == "string" ? detail.img : detail.img.join(','),
        medicalPermit: typeof detail.medicalPermit == "string" ? detail.medicalPermit : detail.medicalPermit.join(','),
      }
      ApiTree.detailUpdateImage(param)
        .then((res) => {
          this.$message.success('图片更改成功');
        })
        .finally(() => {
          this.loadData(2);
          this.imgEditShow = false
        });
    },
    //取消图片编辑
    cancelImgEdit(){
      this.loadData(2);
      this.imgEditShow = false
    },
    //优选店铺编辑
    funEditGrade(){
      let merchantId = [this.detailId]
      this.$refs.gradeForm.open(merchantId);
    },
    //修改客服
    funEditService(){
      let merchantId = [this.detailId]
      this.$refs.serviceForm.open(merchantId);
    },
    //修改商圈
    funEditBusinessArea(){
      let merchantId = this.detailId
      this.$refs.businessAreaForm.open(merchantId);
    },
    //修改商家手机
    funEditMerchantMobile(){
      let merchantId = this.detailId
      this.$refs.merchantMobileForm.open(merchantId);
    },
    closeModal() {
      this.loadData(1);
    },
  },
  filters: {
    //门店类型
    filtersType: function (type) {
      if (type == 0) {
        return '单独门店';
      } else if (type == 1) {
        return '连锁总店';
      } else if (type == 1) {
        return '连锁分店';
      } else {
        return '其他类型';
      }
    },
    //门店状态
    filtersStatus: function (status) {
      switch (status) {
        case 0:
          return '初始状态';
        case 1:
          return '平台下架';
        case 2:
          return '待审核';
        case 3:
          return '审核通过';
        case 4:
          return '审核不通过';
        case 5:
          return '已上架/歇业中';
        case 6:
          return '已上架/营业中';
        default:
          return '未知状态';
      }
    },
    //营业时间类型
    filtersOpenTimeType(type) {
      switch (type) {
        case 0:
          return '周一至周五';
        case 1:
          return '全天';
        default:
          return '未知状态';
      }
    },
    filtersWxApplyStatus(status){
      switch (status) {
        case 1:
          return '完成';
        case 2:
          return '已冻结';
        case 3:
          return '已驳回';
        case 4:
          return '已作废';
        case 5:
          return '已提交';
        case 6:
          return '资料校验中';
        case 7:
          return '审核中';
        case 8:
          return '待签约';
        case 9:
          return '待账户验证';
        default:
          return '';
      }
    },
    //优选店铺
    gradeType(type){
      switch (type) {
        case 0:
          return '普通店铺';
        case 1:
          return '优选店铺';
        default:
          return '未知状态';
      }
    }
  },
};
</script>
<style scoped>
.demo {
  display: inline-block;
  width: 500px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.qr_code{
  width: 200px;
}
</style>